<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #progress{
            width: 400px;
            height: 10px;
            margin-top: 30px;
            background-color: gainsboro;
        }
        #position{
            width: 0;
            background-color: #626262;
            height: 100%;
            position: relative;
        }
        #circle{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
            right: -20px;
            top: -5px;
        }
    </style>
</head>
<body>
    <video id="vedio" src="vedio/vedio.mp4" controls="controls">您的浏览器版本太低了，不支持视频文件，请升级您的浏览器</video>
    <div>
        <input type="button" value="点击播放视频" id="play"/>
        <input type="button" value="点击暂停视频" id="pause">
        <input type="button" value="点击重播视频" id="load">
        <input type="button" value="点击全屏播放" id="full">
        <input type="button" value="点击静音播放" id="muted">
        <input type="button" value="点击有音播放" id="muted1">
        <span id="current">00:00</span>/
        <span id="time">00:00</span>
        <!-- 进度条-->
        <div id="progress">
            <div id="position">
                <span id="circle"></span>
            </div>
        </div>
    </div>
</body>
    <script type="text/javascript">
        <!-- 获取元素-->
//        获取播放的元素
        var play = document.getElementById("play");
//        获取视频标签的元素
        var vedio = document.getElementById("vedio");
//        获取暂停的元素
        var pause = document.getElementById("pause");
//        获取重新播放的元素
        var load = document.getElementById("load");
//        获取全屏播放的元素
        var full = document.getElementById("full");
//        获取播放以播放时间的元素
        var current=document.getElementById("current");
//          获取视频总的时间的元素
        var time=document.getElementById("time");
//        获取进度条的元素
        var progress=document.getElementById("progress");
//        获取进度条的走过的长度
        var position=document.getElementById("position");
//        获取静音的元素
        var muted = document.getElementById("muted");
//        取消静音的元素
        var muted1 = document.getElementById("muted1");
//        播放的点击事件
        play.onclick= function () {
            vedio.play();
        };
//        暂停的点击事件
        pause.onclick= function () {
            vedio.pause();
        };
//        重播的点击事件
        load.onclick= function () {
            vedio.load();
            vedio.play();
        };
//        静音的点击事件
        muted.onclick=function(){
            vedio.volume=0;
        };
        muted1.onclick=function(){
            vedio.volume=1;
        };
//        全屏播放的点击事件
        vedio.addEventListener("canplay",function(){
            full.onclick=function() {
                //如果视频支持全屏这个属性，那么直接调用全屏的方法
                if (vedio.requestFullscreen) {
                    vedio.requestFullscreen();
                }
                if (vedio.webkitRequestFullScreen) {
                    vedio.webkitRequestFullScreen();
                }
                if (vedio.mozRequestFullScreen) {
                    vedio.mozRequestFullScreen();
                }
            }
            });


        vedio.addEventListener("timeupdate",function(){
            current.innerHTML=changeTime(vedio.currentTime);
            time.innerHTML=changeTime(vedio.duration);
            //进度条的实时更新，随着当前时间在变化，那么当前时间/总的时间 比率在变化，那么
            //进度条的宽度的比率也在变化
            position.style.width=(vedio.currentTime/vedio.duration)*100+"%";
        });
        function changeTime(time){
            var m=Math.floor(time/60);
            m<10?m="0"+m:m;
            var s=Math.floor(time%60);
            s<10?s="0"+s:s;
            return m+":"+s;
        }
        //给进度条添加点击事件，传递进来参数当前获取到的事件目标
        progress.onclick=function(e){
            var e=e||window.event;//获取当前的事件
            //获取当前事件的x坐标
            var x= e.offsetX;
            //获取到的是整个元素的宽度
            var w=this.offsetWidth;
            position.style.width=(x/w)*100+"%";
            //绑定时间进度跟我的进度条是一致的
            vedio.currentTime = vedio.duration*(x/w);
        }

    </script>
</html>